<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/login.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/myCookie.js"></script>
    <script src="../js/login.js"></script>
    <link rel="stylesheet" href="../icon/demo.css">
    <link rel="stylesheet" href="../icon/iconfont.css">
</head>

<body>
    <!-- 头部 -->
    <div class="banner">
        <div class="left">
            <a href="http://localhost/xiao_tu_xian/html/1-index.html">
                <div>
                    <img src="../img/logo.jpg" alt="">
                </div>
            </a>
            <span>欢迎登陆</span>
        </div>
        <div class="right">
            <a href="http://localhost/xiao_tu_xian/html/1-index.html" class="into">进入网站首页>></a>
        </div>
    </div>
    <!-- 中间登录界面 -->
    <div class="bgi">
        <div class="big_box">
            <div class="box1">
                <div class="zhang_hu">账户登陆</div>
                <div class="sao_ma">扫码登陆</div>
            </div>
            <div class="box2">
                <div class="one">
                    <div class="name">
                        <span>
                            <i class="iconfont icon-yonghuming"></i>
                        </span>
                        <input type="text" placeholder="请输入用户名">
                    </div>
                    <p class="p1"></p>
                    <div class="pass">
                        <span>
                            <i class="iconfont icon-mima"></i>
                        </span>
                        <input type="password" placeholder="请输入密码">
                    </div>
                    <p class="p2"></p>
                    <div class="checked">
                        <input type="checkbox">
                        <span>我已同意</span>
                        <a href="#">《隐私条款》</a>
                        <span>和</span>
                        <a href="#">《服务条款》</a>
                    </div>
                    <a href="#" class="btn">登陆</a>
                    <div class="bottom">
                        <a href="#" class="tb">
                            <img src="../img/登陆.jpg" alt="">
                        </a>
                        <div>
                            <a href="#" class="forget_password">忘记密码</a>
                            <a href="../html/5-register.html" class="free_registration">免费注册</a>
                        </div>
                    </div>
                </div>
                <div class="two">
                    <img src="../img/扫码登陆.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div id="bottom">
        <ul>
            <li>关于我们</li>|
            <li>帮助中心</li>|
            <li>售后服务</li>|
            <li>配送与验收</li>|
            <li>商务合作</li>|
            <li>搜索推荐</li>|
            <li>友情链接</li>
        </ul>
        <p>CopyRight © 小兔鲜儿</p>
    </div>
    <script>
        let user = document.querySelector('input[type=text]')
        let pass = document.querySelector('input[type=password]')
        let ckb = document.querySelector('input[type=checkbox]')
        let btn = document.querySelector('.btn')
        let p1 = document.querySelector('.p1')
        let p2 = document.querySelector('.p2')
        // 判断cookie有没有值
        function chang() {
            if (getCookie('username') == undefined || getCookie('password') == undefined) {
                user.value = ''
                pass.value = ''
            } else {
                user.value = getCookie('username')
                pass.value = getCookie('password')
                ckb.checked = getCookie('checked')
            }
        }
        chang()
        // 绑定失焦事件
        user.onblur = () => {
            if (user.value == '') {
                p1.innerHTML = '请输入用户名'
            } else {
                p1.innerHTML = ''
            }
        }
         // 绑定失焦事件
        pass.onblur = () => {
            if (pass.value == '') {
                p2.innerHTML = '请输入密码'
            } else {
                p2.innerHTML = ''
            }
        }
        btn.onclick = () => {
            // 非空验证
            if (user.value == '' || pass.value == '') {
                alert('请输入用户名和密码')
                return false;
            }

            // 发送请求，验证数据库里有没有输入的用户名和密码，有就登录，没有就注册
            pAjax({ url: 'http://localhost/xiao_tu_xian/api/login.php', query: { name: user.value, pas: pass.value } })
                .then((data) => {
                    let res = JSON.parse(data)
                    // console.log(res)
                    if (res.code == 200) {
                        location.href = 'http://localhost/xiao_tu_xian/html/1-index.html'
                    } else {
                        p1.innerHTML = res.body.msg
                        p2.innerHTML = res.body.msg
                    }
                })

            // 获取复选框的状态
            let type = ckb.checked
            if (type) {
                setCookie('username', user.value, 7)
                setCookie('password', pass.value, 7)
                setCookie('checked', type, 7)
            } else {
                setCookie('username', user.value)
                delCookie('password')
                delCookie('checked')
            }
        }
    </script>
</body>

</html>